<template>
  <div class="home">
    <Header @addlist="addlist"></Header>
    <Todo :value='unfinish' @deletelist='deletelist'>
      <template slot="stateinfo" >
        <span class="info">
          正在进行
        </span>
      </template>
    </Todo>

    <Todo :value='finish' @deletelist='deletelist'>
      <template slot="stateinfo" >
        <span class="info">
          已经完成
        </span>
      </template>
    </Todo>
  </div>
</template>

<script>

import Header from '../components/header.vue'
import Todo from '../components/todoitem.vue'
export default {
  name: 'Home',
  data(){
        return{
            kotoitem:[],
            id:0
        }
    },
    computed:{
        unfinish:function(){
          return  this.kotoitem.filter(item=>{
                return !item.isChecked
            })
        },
        finish:function(){
          return  this.kotoitem.filter(item=>{
                return item.isChecked
            })
        }
    },
  methods:{
    addlist:function(res){
      this.kotoitem.push({
        id:this.id++,
        isChecked:false,
        info:res
      })
    },
    deletelist:function(idnum){
      console.log('idnum',idnum)
      this.kotoitem = this.kotoitem.filter(function(item){
        return item.id != idnum
      })
    }
  },
  components: {
    Header,Todo
  }
}
</script>
<style scoped lang='scss'>
  .home{
    .info{
            font-size: 30px;
        }
  }
</style>
